<template>
  <div class="content">
    <div class="top" @click="$router.push('/info')">
      <img class="headImg" :src="baseData&&baseData.data.imgUrl + loginUserinfo.avatar" />
      <div class="right">
        <div class="name">{{loginUserinfo.nickName}}</div>
        <div class="ids">
          ID: {{loginUserinfo.userId}}
          <img src="~@/assets/images/center/copyIcon.png" />
        </div>
      </div>
    </div>

    <div class="center">
      <div class="line1">
        <div class="line1-left">全部资产</div>
        <div class="line1-right">
          <div class="line1-right-items" @click="$router.push('/level')">
            <img class="icon" src="../assets/images/center/icon8.png" />
            <p>良好</p>
          </div>
          <div class="line1-right-items">
            <img class="icon" src="../assets/images/center/icon6.png" />
            <p>{{loginUserinfo.identityConfirmed?'已实名':'未实名'}}</p>
          </div>
          <div class="line1-right-items">
            <img class="icon" src="../assets/images/center/icon7.png" />
            <p>{{loginUserinfo.hasWithdrawPassword?'已绑定':'未绑定'}}</p>
          </div>
        </div>
      </div>
      <div class="line2">
        <div class="line2-left">{{balance.allAmount&&balance.allAmount.toFixed(2) || '0.00'}}<p>B</p></div>
        <div class="line2-right">≈ {{balance.allAmount&&balance.allAmount.toFixed(2) || '0.00'}} CNY</div>
      </div>
      <div class="line3">
        <div class="line3-item">
          <span class="line3-item-top">可售金额</span>
          <span class="line3-item-bottom">{{balance.balance&&balance.balance.toFixed(2) || '0.00'}}</span>
        </div>
        <div class="line3-item">
          <span class="line3-item-top">不可售金额</span>
          <span class="line3-item-bottom">{{balance.notSaleAmount&&balance.notSaleAmount.toFixed(2) || '0.00'}}</span>
        </div>
        <div class="line3-item">
          <span class="line3-item-top">冻结金额</span>
          <span class="line3-item-bottom arr">{{balance.freezeAmount&&balance.freezeAmount.toFixed(2) || '0.00'}}</span>
        </div>
      </div>
      <div class="line4">
        <img src="../assets/images/center/icon9.png" />
        <span>{{balance.walletAddress}}</span>
        <img src="../assets/images/center/icon10.png" />
      </div>
      <div class="line5">
        <div class="line5-item">
          <img src="../assets/images/center/11.png" />
          <span>我的账单</span>
        </div>
        <div class="line5-item" @click="$router.push('/safeCenter')">
          <img :src="loginUserinfo.identityConfirmed?require('@/assets/images/center/btn_secure.webp'):require('@/assets/images/center/12.png')" />
          <span>安全中心</span>
        </div>
        <div class="line5-item" @click="$router.push('/payee')">
          <img src="../assets/images/center/13.png" />
          <span>收款方式</span>
        </div>
        <div class="line5-item" @click="$router.push('/identify')">
          <img :src="loginUserinfo.identityConfirmed?require('@/assets/images/center/btn_name_auth.webp'):require('@/assets/images/center/14.png')" />
          <span>实名认证</span>
        </div>
      </div>
    </div>

    <div class="menus">
      <div class="menu">
        <img class="icon" src="../assets/images/center/icon1.png" />
        <p>通知中心</p>
      </div>
      <div class="menu">
        <img class="icon" src="../assets/images/center/icon2.png" />
        <p>帮助中心</p>
      </div>
      <div class="menu">
        <img class="icon" src="../assets/images/center/icon3.png" />
        <p>联系客服</p>
      </div>
      <div class="menu">
        <img class="icon" src="../assets/images/center/icon4.png" />
        <p>分享98Pay</p>
      </div>
      <div class="menu" @click="openPage('/system')">
        <img class="icon" src="../assets/images/center/icon5.png" />
        <p>系统设置</p>
      </div>
    </div>
  </div>
</template>

<script>
  import api from "@/api/center";
  import {
    mapState,
  } from "vuex";
  export default {
    data() {
      return {
        info: {},
        balance: {},
      }
    },
    computed: {
      ...mapState({
        loginUserinfo: state => state.global.loginUserinfo,
        baseData: state => state.global.baseData
      }),
    },
    methods: {
      openPage(page){
        this.$router.push(page)
      },
      async getBalance(){
        let {data} = await api.balance()
        if(data.code === 0){
          this.balance = data.data;
        }
      },
    },
    mounted() {
      this.getBalance()
    },
  }
</script>

<style lang="scss" rel="stylesheet/scss" type="text/scss" scoped>
.content{
  background-image: url('../assets/images/login/bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 35px 20px 15px 15px;
  height: calc(100% - 30px);
  width: calc(100% - 30px);
  position: relative;
  .top{
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    .headImg{
      width: 60px;
      height: 60px;
      margin-right: 12px;
      border-radius: 50%;
    }
    .right{
      .name{
        height: 22.5px;
        font-size: 16px;
        font-weight: Medium;
        color: #444444;
        line-height: 22.5px;
        display: flex;
        align-items: center;
        &::after{
          content: " ";
          display: block;
          background-image: url('../assets/images/center/arr.png');
          width: 8px;
          height: 12px;
          background-size: 100% 100%;
          margin-left: 8px;
        }
      }
      .ids{
        display: flex;
        align-items: center;
        font-size: 12px;
        font-weight: Regular;
        color: #8f949c;
        line-height: 12px;
        margin-top: 5px;
        img{
          width: 10px;
          height: 10px;
          margin-left: 8px;
        }
      }
    }
  }
  .center{
    background-image: url('../assets/images/center/bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-bottom: 12px;
    padding: 12px 25px;
    .line1{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .line1-left{
        height: 18.5px;
        font-size: 13px;
        text-align: left;
        color: #ffffff;
        line-height: 18.5px;
      }
      .line1-right{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .line1-right-items{
          display: flex;
          align-items: center;
          margin-left: 10px;
          .icon{
            width: 12px;
          }
          p{
            height: 16.5px;
            opacity: 0.8;
            font-size: 12px;
            text-align: left;
            color: #ffffff;
            line-height: 16.5px;
            margin-left: 5px;
          }
        }
      }
    }
    .line2{
      display: flex;
      align-items: center;
      margin-top: 5px;
      .line2-left{
        font-size: 28px;
        text-align: left;
        color: #ffffff;
        line-height: 35.5px;
        display: flex;
        align-items: center;
        margin-right: 8px;
        p{
          line-height: 35.5px;
          margin-left: 8px;
        }
      }
      .line2-right{
        height: 19px;
        opacity: 0.5;
        font-size: 15px;
        text-align: left;
        color: #ffffff;
        line-height: 19px;
      }
    }
    .line3{
      display: flex;
      margin-top: 10px;
      width: 100%;
      justify-content: space-between;
      .line3-item{
        display: flex;
        flex-direction: column;
        .line3-item-top{
          opacity: 0.5;
          font-size: 12px;
          color: #ffffff;
          line-height: 16.5px;
        }
        .line3-item-bottom{
          font-size: 15px;
          font-weight: bold;
          text-align: left;
          color: #ffffff;
          margin-top: 3px;
        }
        .arr{
          display: flex;
          align-items: center;
          &::after{
            content: " ";
            display: block;
            background-image: url('../assets/images/center/arr3.png');
            width: 8px;
            height: 12px;
            background-size: 100% 100%;
            margin-left: 8px;
            width: 7px;
            height: 11px;
          }
        }
      }
    }
    .line4{
      background: rgba(0,93,255,0.15);
      border-radius: 5px;
      display: flex;
      align-items: center;
      padding: 7px 10px;
      margin-top: 12px;
      img{
        width: 12px;
        height: 12px;
      }
      span{
        height: 16.5px;
        font-size: 12px;
        text-align: left;
        color: #ffffff;
        line-height: 16.5px;
        width: calc(100% - 40px);
        margin: 0 8px;
      }
    }
    .line5{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 30px;
      .line5-item{
        display: flex;
        flex-direction: column;
        align-items: center;
        span{
          height: 18.5px;
          font-size: 13px;
          text-align: center;
          color: #444444;
          line-height: 18.5px;
          margin-top: 6px;
        }
        img{
          width: 25px;
          height: 25px;
        }
      }
    }
  }
  .menus{
    background: #ffffff;
    border-radius: 8px;
    height: 264px;
    padding: 0 15px;
    .menu{
      display: flex;
      align-items: center;
      position: relative;
      p{
        line-height: 52px;
        width: calc(100% - 27px);
        font-size: 14px;
        text-align: left;
        color: #444444;
        border-bottom: 1px solid #eff0f3;
      }
      .icon{
        margin-right: 12px;
        width: 27px;
        height: 27px;
      }
      &::after{
        content: " ";
        display: block;
        background-image: url('../assets/images/center/arr2.png');
        width: 7px;
        height: 11px;
        background-size: 100% 100%;
        top: 20px;
        right: 15px;
      }
    }
  }
}
</style>
